<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人网页设计</title>
</head>
<style>
    body {
        background-image: url(背景图.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
        background-size: 100%;
    }
    
    .yi {
        width: 1500px;
        height: 800px;
        position: relative;
        text-align: center;
        position: relative;
    }
    
    h1 {
        background-size: 100px;
        background-repeat: no-repeat;
        text-indent: 68px;
        background-position: center;
        font-size: 100px;
        color: rgb(209, 113, 169);
    }
    
    .hengiao {
        background-color: rgb(221, 205, 216);
        width: 520px;
        height: 15px;
        border-radius: 7.5px;
        position: absolute;
        left: 450px;
        top: 320px;
    }
    
    .A {
        background-size: 40px;
        position: absolute;
        left: 200px;
        top: 100px;
    }
    
    .B {
        background-color: rgb(221, 205, 216);
        width: 120PX;
        height: 60PX;
        position: absolute;
        left: 700px;
        top: 250px;
        border-radius: 30px;
        text-align: center;
        font-family: 方正粗黑宋简体;
        font-size: 30px;
        color: rgb(230, 113, 167);
        line-height: 60px;
    }
    
    .Q {
        position: absolute;
        left: 450px;
        top: 130px;
    }
    
    .C {
        position: fixed;
        left: 1250PX;
        top: 10px;
        padding-left: 10px;
        display: inline-block;
    }
    
    .D {
        top: 310px;
        left: 600px;
        position: absolute;
    }
    
    .er {
        width: 1500px;
        height: 800px;
        position: relative;
        text-align: center;
    }
    
    .DD {
        position: absolute;
        width: 80px;
        height: 80px;
        border-radius: 40px;
        background-color: rgb(228, 179, 225);
        animation: move 25s infinite reverse;
    }
    
    .DA {
        position: absolute;
        width: 80px;
        height: 80px;
        border-radius: 40px;
        background-color: rgb(207, 151, 204);
        animation: move 25s infinite reverse;
        left: 1300px;
        top: 300px;
    }
    
    .DB {
        position: absolute;
        width: 80px;
        height: 80px;
        border-radius: 40px;
        background-color: rgb(245, 204, 242);
        animation: move 25s infinite reverse;
        left: 500px;
        top: 250px;
    }
    
    .F {
        position: absolute;
        left: 575px;
        top: 260px;
        width: 350px;
        height: 130px;
        background-color: rgb(221, 205, 216);
        font-family: 方正粗黑宋简体;
        font-size: 100px;
        color: rgb(230, 113, 167);
        border-radius: 75px;
    }
    
    .E {
        position: absolute;
        left: 550px;
        top: 250px;
        width: 400px;
        height: 150px;
        border-radius: 75px;
        background-color: rgb(230, 113, 167);
    }
    
    .G {
        position: absolute;
        top: 600px;
        left: 630px;
    }
    
    .san {
        width: 1500px;
        height: 800px;
        position: relative;
        text-align: center;
    }
    
    .H {
        position: absolute;
        width: 650px;
        height: 450px;
        background-color: rgb(245, 244, 190);
        left: 105px;
        top: 180px;
        z-index: -5;
    }
    
    .I {
        position: absolute;
        width: 110PX;
        height: 65PX;
        background-color: rgb(221, 205, 216);
        border-radius: 25px;
        font-family: 方正粗黑宋简体;
        font-size: 50px;
        color: rgb(230, 113, 167);
        left: 40px;
        top: 80px;
    }
    
    .J {
        position: absolute;
        background-color: rgb(226, 199, 149);
        height: 55px;
        width: 700px;
        font-family: 方正粗黑宋简体;
        font-size: 45px;
        color: rgb(177, 236, 224);
        left: 80px;
        top: 220px;
    }
    
    .K {
        position: absolute;
        width: 400PX;
        height: 600PX;
        left: 900PX;
        top: 70PX;
    }
    
    .L {
        position: absolute;
        width: 100px;
        height: 35px;
        background-color: rgb(221, 205, 216);
        left: 1350px;
        top: 350px;
        border-radius: 25px;
        font-family: 方正粗黑宋简体;
        font-size: 20px;
        color: rgb(230, 113, 167);
    }
    
    .M {
        position: absolute;
        top: 460PX;
        left: 400PX;
    }
    
    .AE {
        position: absolute;
        top: 200PX;
        left: 100PX;
    }
    
    .si {
        width: 1500px;
        height: 800px;
        position: relative;
        text-align: center;
    }
    
    .AQ {
        position: absolute;
        left: 300px;
        top: 100px;
    }
    
    .AW {
        position: absolute;
        left: 680px;
        top: 100px;
    }
    
    .AS {
        position: absolute;
        left: 1100px;
        top: 100px;
    }
    
    .AR {
        position: absolute;
        top: 200PX;
        left: 8PX;
    }
    
    .N {
        position: absolute;
        width: 110PX;
        height: 65PX;
        background-color: rgb(221, 205, 216);
        border-radius: 25px;
        font-family: 方正粗黑宋简体;
        font-size: 50px;
        color: rgb(230, 113, 167);
        left: 40px;
        top: 80px;
    }
    
    .wu {
        width: 1500px;
        height: 800px;
        position: relative;
        text-align: center;
    }
    
    .R {
        position: absolute;
        width: 250PX;
        height: 65PX;
        background-color: rgb(221, 205, 216);
        border-radius: 25px;
        font-family: 方正粗黑宋简体;
        font-size: 50px;
        color: rgb(230, 113, 167);
        left: 40px;
        top: 80px;
    }
    
    .P {
        position: absolute;
        left: 100px;
        top: 80px;
    }
    
    .liu {
        width: 1500px;
        height: 800px;
        position: relative;
        text-align: center;
    }
    
    .Z {
        position: absolute;
        width: 250PX;
        height: 65PX;
        background-color: rgb(221, 205, 216);
        border-radius: 25px;
        font-family: 方正粗黑宋简体;
        font-size: 50px;
        color: rgb(230, 113, 167);
        left: 150px;
        top: 80px;
    }
    
    .T {
        position: absolute;
        left: 300px;
        top: 180px;
    }
    
    .W {
        position: absolute;
        width: 350px;
        height: 180px;
        left: 250px;
        top: 10px;
        text-align: left;
    }
    
    .W p {
        position: absolute;
        font-family: 方正粗黑宋简体;
        font-size: 30px;
        color: rgb(230, 113, 167);
    }
    
    .X {
        position: absolute;
        width: 250PX;
        height: 65PX;
        background-color: rgb(221, 205, 216);
        border-radius: 25px;
        font-family: 方正粗黑宋简体;
        font-size: 50px;
        color: rgb(230, 113, 167);
        left: 10px;
        top: 400px;
    }
    
    .U {
        position: absolute;
        width: 200PX;
        height: 200PX;
        left: 250px;
        top: 450px;
    }
    
    .m {
        margin-right: 10px;
        display: inline-block;
    }
    
    .n {
        margin-right: 10px;
        display: inline-block;
    }
    
    .i {
        margin-right: 10px;
        display: inline-block;
    }
    
    .an {
        position: relative;
        width: 1450px;
    }
    
    .ax {
        position: absolute;
        text-align: left;
        left: 300px;
    }
    
    .ac {
        position: absolute;
        text-align: left;
        left: 880px;
    }
    
    .P {
        position: relative;
    }
    
    .one {
        position: absolute;
        left: 100px;
        top: 100px;
    }
    
    .two :hover {
        position: absolute;
        left: 600px;
        top: 100px;
    }
    
    .three {
        position: absolute;
        left: 1000px;
        top: 100px;
    }
    
    .Y {
        position: absolute;
        height: 55px;
        width: 700px;
        font-family: 方正粗黑宋简体;
        font-size: 40px;
        color: rgb(177, 236, 224);
        left: 2px;
        top: 180px;
    }
    
    @keyframes move {
        0% {
            transform: translate(0, 0);
        }
        10% {
            transform: translate(25px, 30px);
            background-color: rgb(39, 38, 38);
        }
        20% {
            transform: translate(100px, -500px);
        }
        30% {
            transform: translate(-200px, 60px);
        }
        40% {
            transform: translate(0px, -700px);
        }
        50% {
            transform: translate(35px, 800px);
            background-color: rgb(97, 90, 90);
        }
        70% {
            transform: translate(100px, 300px);
        }
        80% {
            transform: translate(50px, 10px);
        }
        100% {
            transform: translate(0px, 100px) rotate(45deg) scale(1.5);
        }
    }
    /* transform: translate( 50px 50px);位移
        /* transform: scale(0.5 2);
        /* transform: rotate(45deg);顺时针旋转45度，-45为逆时针旋转 */
    /* } */
    /* div:hover {
            transform: translate( 50px 50px);
        } */
</style>

<body>
    <div class="yi">
        <div class="CA">
            <img src="hh.jpg" alt="" width="50px" height="30px">
        </div>
        <div class="A">
            <a style="font-family: 方正粗黑宋简体;font-size: 300px; color: rgb(230, 113, 167);">D</a>
        </div>


        <div class="Q">
            <P style="font-family: 方正粗黑宋简体;font-size: 70px;color: rgb(230, 113, 167);">esign</P>
        </div>
        <div class="hengiao"> </div>
        <div class="B">
            Enter
        </div>
        <div class="D">
            <P style="font-family: 方正粗黑宋简体;font-size: 45px;color: rgb(177, 236, 224);">Personal Website</P>
        </div>
        <div class="C">
            <div class="m"><a href="#1" style="font-family: 方正粗黑宋简体;font-size: 23px;color: rgb(177, 236, 224);">首页 </a></div>
            <div class="n"><a href="#2" style="font-family: 方正粗黑宋简体;font-size: 23px;color: rgb(177, 236, 224);">作品集 </a></div>
            <div class="i"><a href="#3" style="font-family: 方正粗黑宋简体;font-size: 23px;color: rgb(177, 236, 224);">关于我 </a></div>
        </div>

    </div>
    <div class="er">
        <div class="DD"></div>
        <div class="DA"></div>
        <div class="DB"></div>
        <div class="E"></div>
        <div class="F">
            <a id="2">  作品集</a>
        </div>


        <div class="G">
            <P style="font-family: 方正粗黑宋简体;font-size: 38px;color:rgb(230, 113, 167);">Let's looking.</P>

        </div>
    </div>
    <div class="san">
        <div class="K"><img src="1.jpg" alt="" width="400px" height="600px"></div>
        <div class="I">
            海报
        </div>
        <div class="J">
            作品介绍

        </div>
        <div class="H">
            <div class="Y">
                这张海报的主题是快乐和变成更<br>好的自己。大写的“H”就是<br>“happy”的首字母
            </div>
        </div>
        <div class="L">
            <a href="index1.html"> 更多作品</a>
        </div>
        <div class="M">
            <P style="font-family: 方正粗黑宋简体;font-size: 150px;color:rgb(230, 113, 167);">01</P>

        </div>

    </div>
    <div class="si">
        <div class="N">
            插画
        </div>
        <div class="AE">
            <P style="font-family: 方正粗黑宋简体;font-size: 150px;color:rgb(230, 113, 167);">02</P>

        </div>

        <div class="AQ"><img src="2.jpg" alt="" width="330px" height="500px"></div>
        <div class="AW"><img src="3.jpg" alt="" width="370px" height="550px"></div>
        <div class="AS"><img src="4.jpg" alt="" width="330px" height="500px"></div>

    </div>
    <div class="wu">
        <div class="R">APP界面</div>
        <div class="AR">
            <P style="font-family: 方正粗黑宋简体;font-size: 150px;color:rgb(230, 113, 167);">03</P>
        </div>
        <div class="P">
            <div class="one"> <img src="5.jpg" alt="" width="380px" height="550px"></div>
            <div class="two"> <img src="6.jpg" alt="" width="330px" height="700px"></div>
            <div class="three"> <img src="7.jpg" alt="" width="280px" height="600px"></div>

        </div>

    </div>
    <div class="liu">
        <div class="Z">
            <a id="3">  关于我</a>
        </div>
        <div class="T">
            <img src="8.jpg" alt="" width="150px" height="150px">
            <div class="W">
                <p>姓名：谭周欣<br>性别：女<br>爱好：设计 摄影 听音乐</p>
            </div>
            <div class="X">
                I can
            </div>
            <div class="U">
                <img src="9.png" alt="" width="70px" height="70px">
                <img src="10.png" alt="" width="70px" height="70px">
            </div>
        </div>
    </div>
    <div class="last">
        <div class="an">
            <div class="ax">
                <p style="font-family: 方正粗黑宋简体; font-size: 20px ;color:rgb(239, 205, 243);"> QQ: 2846856925</p>
                <p style="font-family: 方正粗黑宋简体; font-size: 20px ;color:rgb(239, 205, 243);">WeChat: xxsurprise22tt</p>
            </div>
            <div class="ac">
                <p style="font-family: 方正粗黑宋简体; font-size: 20px ;color:rgb(239, 205, 243);">Phone: 15202810491</p>
                <p style="font-family: 方正粗黑宋简体; font-size: 20px ;color:rgb(239, 205, 243);">Mailbox: 284685@6925.com</p>
            </div>
        </div>
    </div>


</body>

</html>